<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">

      <form action="###">

        <!-- 

          零件1-input：v-model在普通输入框的基础使用
          关键问题：如何从页面中收集用户产生的数据呢？即v-model如何收集数据呢？

          一休时刻：首先，应该考虑数据应该被存放在哪里？
          基于对v-bind的理解数据应该被放在data上，其次如何确定数据类型呢？在什么时候确定呢？
          应该在v-model绑定数据前确定它的数据类型
          即：在data中预先写好它的数据类型，然后等待用户输入后直接收集


         -->

        请输入用户名：<input type="text" v-model="username">
        请输入密码：<input type="password" v-model="password">

        <!-- 

          零件1-input：v-model在多选框的基础使用
          情景1：当需要用户勾选 “你是否同意该协议” 时，应当使用单选框还是多选框
          经验：应该使用多选框的格式，生活中大多数都使用它，同时也符合行业规定
          问题：请问你从单独使用的复选框中需要收集的数据是什么？
          勾选：true 未勾选false 所以在data中应该提前准备好的数据是布尔格式的

          情景2：请勾选您所希望上的课程
          问题：数据格式应该用哪个（因为是多个：组数与对象）
          exp: 此处应该使用数组，同类型数据用数组，键值对形式的用对象
          注意：vue会自动将value值按照用户勾选的顺序添加到数据（数组）中
         
          小结：复选框使用指南
                当遇到是否同意等逻辑时，单独使用，其他情况多个使用，用数组收集
              
         -->

         <p> <input type="checkbox" v-model="isAgree" > 你是否同意该协议 </p>

         <p>请勾选您所希望上的课程:</p>
         <p> <input type="checkbox" value="音乐" v-model="course">音乐 
             <input type="checkbox" value="哲学" v-model="course">哲学 
             <input type="checkbox" value="美术" v-model="course">美术 
             <input type="checkbox" value="心理学" v-model="course">心理学
            </p>


          <!-- 
            零件1-input：v-model在单选框的基础使用
            问题：数据格式应该用哪个
            应该使用字符串，最终收集的数据本身就是字符串

            突发：如何完成单选，添加name吗？
            解决：不用，直接使用添加v-model即可


          -->
          <p>您最喜欢的城市:</p>
          <p>
            <input type="radio" value="北京" v-model="city">北京
            <input type="radio" value="重庆" v-model="city">重庆
            <input type="radio" value="开封" v-model="city">开封
            <input type="radio" value="南京" v-model="city">南京
          </p>

          <!-- 
            零件2-select：v-model在下拉列表的基础使用

            注：下拉列表的多选使用方式，添加multiple属性即可

           -->

          <p>
            请选择你和你朋友出身的年份
            <select v-model="years" multiple>

              <option value="1996">1996</option>
              <option value="1997">1997</option>
              <option value="1998">1998</option>
              <option value="1999">1999</option>

            </select>
          </p>

          <!-- 

            零件3-textarea：v-model在文本域的基础使用
            问题：数据格式应该用哪个
            应该使用字符串，最终收集的数据本身就是字符串

           -->
           <p>
            <h3>请发表你对世界杯的看法</h3> 
           <textarea v-model="viewpoint"></textarea>
          </p>

      </form>






    </div>
</body>
<script>

    Vue.config.productionTip = false; // 解决警告信息的

    const vm = new Vue({
      el: "#app",
      data() {
        return {
          username:"初始的",
          password:"",
          isAgree: false,
          course:[],
          city:"",
          years:[],
          viewpoint:"",
          

        };
      },
    });
  </script>


</html>